<template>
  <div class="overlay" v-if="visible">
    <div class="head">
      <span>{{ data.name }}</span>
      <svg-icon name="close" @click="close"></svg-icon>
    </div>
    <div class="view">
      <div class="view-area">
        <div>
          设备类型：<span>{{ data.typeName }}</span>
        </div>
        <div>
          电压等级：<span>{{ data.voltageLevel }}</span>
        </div>
        <div>
          设备状态：<span>{{ data.status }}</span>
        </div>
        <div>
          运行编号：<span>{{ data.runNum }}</span>
        </div>
      </div>

      <div class="sublabel">缺陷详情</div>
      <template v-if="data.defectManageDetailVOS.length > 0">
        <div class="defect">
          <div class="left" @click="prevDef">
            <DoubleLeftOutlined />
          </div>
          <a-spin tip="正在加载..." :spinning="FmLoading">
            <a-image v-if="FmUrl" :src="FmUrl" />
            <div v-else></div>
          </a-spin>
          <div v-if="!FmLoading">
            <empty></empty>
          </div>
          <div class="right" @click="nextDef">
            <DoubleRightOutlined />
          </div>
        </div>
        <div class="bg-[#f2f3f5] px-3 py-3">
          <div>检测时间：{{ defData.algTime }}</div>
          <div class="flex justify-between mt-2">
            <div>部件名称：{{ defData.partName }}</div>
            <div>缺陷结果：{{ defData.defectResult }}</div>
          </div>
        </div>
      </template>
      <div v-else>
        <empty></empty>
      </div>

      <div class="sublabel">分割结果</div>
      <template v-if="data.defectManageDetailVOS.length > 0">
        <div class="h-[13rem] overflow-hidden">
          <a-spin tip="正在加载..." :spinning="UnLoading">
            <a-image v-if="UnUrl" :src="UnUrl" />
          </a-spin>
          <div v-if="!UnLoading">
            <empty description="暂无分割结果"></empty>
          </div>
        </div>
        <div class="bg-[#f2f3f5] px-3 py-3" v-if="UnUrl">
          <div>检测时间：{{ defData.algTime }}</div>
        </div>
      </template>
      <div v-else>
        <empty></empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import { indexDeviceDeInfo, uavDeInfo } from './serve.api'

// @ts-ignore
import { unpick, frame } from '@/utils/grap'

const visible = ref(false)

const data = ref()

// 缺陷数据
const defData = ref({
  algTime: '',
  partName: '',
  defectResult: ''
})

const FmLoading = ref(false)
const FmUrl = ref()
const UnLoading = ref(false)
const UnUrl = ref()

const close = () => {
  visible.value = false
}

function loadDefect(params: any) {
  console.log(params)
  defData.value = params

  FmLoading.value = UnLoading.value = true
  FmUrl.value = UnUrl.value = ''

  uavDeInfo({ id: params.id }).then((res) => {
    console.log(res, '加载缺陷详情', res.uavSeqResult)

    try {
      frame(res.imagePath, res.bbox).then((i: string) => {
        FmUrl.value = i
        FmLoading.value = false
      })
    } catch (error) {
      FmLoading.value = false
    }

    if (res.uavSeqResult) {
      const { imagePath, maskImagePath, resultDetailList } = res.uavSeqResult
      unpick(imagePath, maskImagePath, resultDetailList).then((x: string) => {
        frame(x, resultDetailList).then((y: string) => {
          UnUrl.value = y
          UnLoading.value = false
        })
      })
    } else {
      UnLoading.value = false
    }
  })
}

let current = 0
function prevDef() {
  current--
  if (current <= 0) {
    message.warning('第一个缺陷')
    return (current = 0)
  }
  const defDel = data.value.defectManageDetailVOS[current]
  console.log(current, '上一个缺陷', defDel)
  loadDefect(defDel)
}
function nextDef() {
  current++
  if (current >= data.value.defectManageDetailVOS.length) {
    message.warning('最后一个缺陷')
    return (current = data.value.defectManageDetailVOS.length - 1)
  }
  const defDel = data.value.defectManageDetailVOS[current]
  console.log(current, '下一个缺陷', defDel)
  loadDefect(defDel)
}

const showModal = (value: any) => {
  if (value) {
    console.log(value, '弹窗显示，设备信息')
    indexDeviceDeInfo({
      // id: '4bb7a404c98a0a7de7543f3b5601544bb6ce840d39'
      id: value
    }).then((res) => {
      console.log(res, '设备详情===================')
      data.value = res

      visible.value = true

      if (res.defectManageDetailVOS.length > 0) {
        const defDel = res.defectManageDetailVOS[0]
        loadDefect(defDel)
      }
    })
  }
}

defineExpose({ showModal, close })
</script>

<style lang="less" scoped>
.overlay {
  position: fixed;
  top: 4rem;
  right: 1.25rem;
  z-index: 1;
  display: flex;
  overflow: hidden overlay;
  width: 32.5rem;
  max-height: 48rem;
  background-color: #fff;
  border-radius: 0.5rem;
  flex-direction: column;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 2.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 1px solid #e5e6eb;

    span {
      font-weight: 800;
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .sublabel {
    margin: 1rem 0 0.5rem;
    color: #1d2129;
    font-weight: 800;
    line-height: 1;
  }

  .view {
    overflow-y: auto;
    padding: 1rem;
    flex: 1;
    -webkit-overflow-scrolling: touch;

    &-area {
      display: grid;
      padding: 1rem;
      color: #4e5969;
      background-color: #f2f3f5;
      border-radius: 0.25rem;
      grid-template-columns: repeat(2, 1fr);

      div:not(:nth-child(-1n + 2)) {
        margin-top: 0.625rem;
      }

      span {
        color: #1d2129;
      }
    }
  }
}

:deep(.ant-image) {
  display: block;
  aspect-ratio: 16 / 9;
}

.defect {
  position: relative;
  overflow: hidden;
  height: 12rem;

  .ant-spin-nested-loading > div > .ant-spin {
    height: 12rem !important;
  }

  .left,
  .right {
    position: absolute;
    align-self: center;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 1rem;
    color: #000;
  }

  .left {
    left: 1rem;
  }

  .right {
    right: 1rem;
  }
}

.def-image {
  aspect-ratio: 16 / 9;
}
</style>
